<template>
  <div class="app-container">
<!--    <h3 align="center">讲师添加</h3>-->
    <el-form label-width="120px">
      <el-form-item label="讲师名称">
        <el-input v-model="saveteacher.name"/>
      </el-form-item>
      <el-form-item label="讲师排序">
        <el-input-number v-model="saveteacher.sort" controls-position="right" min="0"/>
      </el-form-item>
      <el-form-item label="讲师头衔">
        <el-select v-model="saveteacher.level" clearable placeholder="请选择">
          <el-option :value="1" label="高级讲师"/>
          <el-option :value="2" label="首席讲师"/>
        </el-select>
      </el-form-item>
      <el-form-item label="讲师资历">
        <el-input v-model="saveteacher.career"/>
      </el-form-item>
      <el-form-item label="讲师简介">
        <el-input v-model="saveteacher.intro" :rows="10" type="textarea"/>
      </el-form-item>

      <!-- 讲师头像：TODO -->
      <el-form-item label="讲师头像">

        <!-- 头衔缩略图 -->
        <pan-thumb :image="saveteacher.avatar"/>
        <!-- 文件上传按钮 -->
        <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
        </el-button>

        <!--
    v-show：是否显示上传组件
    :key：类似于id，如果一个页面多个图片上传控件，可以做区分
    :url：后台上传的url地址
    @close：关闭上传组件
    @crop-upload-success：上传成功后的回调
      <input type="file" name="file"/>
    -->
        <image-cropper
          v-show="imagecropperShow"
          :width="300"
          :height="300"
          :key="imagecropperKey"
          :url="BASE_API+'/eduoss/fileoss'"
          field="file"
          @close="close"
          @crop-upload-success="cropSuccess"/>
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>
<script>
// 引入调用teacher.js文件
import teacher from '@/api/edu/teacher'
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

export default {
  components: {ImageCropper,PanThumb},

  // 写核心代码
  data(){ //定义变量和初始值
    return {
      saveteacher:{
        avatar:"https://online-teach-file.oss-cn-beijing.aliyuncs.com/teacher/2019/11/08/e44a2e92-2421-4ea3-bb49-46f2ec96ef88.png"
      },
      saveBtnDisabled: false,

      //上传组件弹框是否显示
      imagecropperShow:false,
      //上传组件key的唯一标识
      imagecropperKey:0,
      //获取dev.env.js里面的地址
      BASE_API:process.env.BASE_API
    }
  },
  created() {
    if(this.$route.params && this.$route.params.id){
      const id = this.$route.params.id
      this.getinfo(id)
    }
  },
  methods: { //创建具体的方法，调用teacher.js定义的方法
    close(){//关闭上传弹框的方法
      this.imagecropperShow=false

    },
    //上传成功之后的方法
    cropSuccess(data){
      //上传之后返回图片地址
       this.saveteacher.avatar = data.url
    },

    //根据教师id查询数据
    getinfo(id){
      teacher.getById(id)
             .then(response=>{
               this.saveteacher = response.data.info
             })
    },

    saveOrUpdate(){
      //判断修改还是添加
      //根据saveteacher中是否有id进行判断，是调用修改还是添加
      if(this.saveteacher.id){
        this.updateteacher();
      }
      else{
        this.addteacher()
      }

    },

    //修改讲师方法
    updateteacher(){
      this.$confirm('是否确认修改?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
        teacher.upset(this.saveteacher)
               .then( response =>{
                 this.$message({
                   type: 'success',
                   message: '修改成功！'
                 })
                 //回到列表页面 路由跳转
                 this.$route.push({path:'/teacher/table'})
               })
      }
      )
    },

    //讲师添加
    addteacher() {
      this.$confirm('是否确认添加?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        teacher.addteacher(this.saveteacher)
          .then(response => {
            //response接口返回的数据
            console.log(this.saveteacher)
            console.log(response)
          })
        this.saveteacher = {}
        this.$route.push({path:'/teacher/table'})
      })
    }
  }
}
</script>
